<template>
  <section class="loading-wrap">
    <img
      src="@/assets/images/loading.png"
      alt="加载失败"
      class="icon-wrap"
    >
    <p class="text-wrap">
      {{ message }}
    </p>
  </section>
</template>
<script setup lang="ts">
defineProps({
  message: {
    type: String,
    default: '努力加载中...',
  },
});
</script>
<style lang="scss" scoped>
.loading-wrap {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 12px 0;
  font-size: var(--#{$ns}-font-size-small);
  color: var(--#{$ns}-text-color-regular);

  .icon-wrap {
    width: 86px;
    height: 90px;
  }

  .text-wrap {
    margin-top: var(--#{$ns}-space-size-mini);
  }
}
</style>
